<template>
  <el-dialog
    v-model="dialogShow"
    :custom-class="customClass ? `move-dialog ${customClass}` : 'move-dialog'"
    :append-to-body="appendToBody"
    :before-close="beforeClose"
    :width="width"
    :modal="modal"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :show-close="showClose"
    :destroy-on-close="destroyOnClose"
    draggable
  >
    <template #header>
      <div class="move-dialog-title" :class="logoutClass ? 'logout-title' : ''">
        <slot name="icon"></slot>
        {{ title }}
      </div>
    </template>
    <slot></slot>
    <template #footer>
      <div class="dialog-footer">
        <slot name="footer"></slot>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
/**
 * 可拖动的dialog
 * 使用参数参考element-plus el-dialog
 */
import { defineComponent, computed } from 'vue'
export default defineComponent({
  name: 'ResizeDialog',
  props: {
    visible: {
      // 是否显示 Dialog
      type: Boolean,
      default: false
    },
    title: {
      // 标题
      type: String,
      default: ''
    },
    width: {
      // 宽度
      type: String,
      default: '30%'
    },
    appendToBody: {
      // Dialog 自身是否插入至 body 元素上
      type: Boolean,
      default: true
    },
    logoutClass: {
      // 推出样式
      type: Boolean,
      default: false
    },
    modal: {
      // 是否需要遮罩层
      type: Boolean,
      default: true
    },
    closeOnClickModal: {
      // 是否可以通过点击 modal 关闭 Dialog
      type: Boolean,
      default: false
    },
    closeOnPressEscape: {
      // 是否可以通过按下 ESC 关闭 Dialog
      type: Boolean,
      default: false
    },
    showClose: {
      // 是否显示关闭按钮
      type: Boolean,
      default: true
    },
    destroyOnClose: {
      // 当关闭 Dialog 时，销毁其中的元素
      type: Boolean,
      default: false
    },
    beforeClose: {
      // 关闭前的回调，会暂停 Dialog 的关闭
      type: Function
    },
    customClass: {
      // 自定义样式
      type: String,
      default: ''
    }
  },
  setup(props, context) {
    const dialogShow = computed({
      get: () => props.visible,
      set: (val) => context.emit('update:visible', val)
    })
    return {
      dialogShow
    }
  }
})
</script>

<style lang="stylus">
.move-dialog
  position: absolute
  top 50%
  left 50%
  transform: translate(-50%, -50%)
  margin-top 0px !important
  border-radius 4px
  .el-dialog__footer
    border-top 1px solid rgba(0, 0, 0, 0.05)
</style>
<style lang="stylus" scoped>
.move-dialog-title {
  position: absolute;
  width: 100%;
  height: 54px;
  top: 0;
  left: 0;
  line-height: 54px;
  padding: 0px 24px;
  font-size 16px
  box-sizing border-box
  cursor: move;
  box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.88)
  font-weight: 500;
  .MC_iconfont {
    margin-right 10px
  }
}
.logout-title {
  font-size 20px
  box-shadow none
}
</style>
